<template>
  <div>
    <!-- 环形饼图容器 -->
    <EChartWrapper :type="'pie'" :options="pieChartOptions" />
    <!-- 堆积柱状图容器 -->
    <EChartWrapper :type="'bar'" :options="barChartOptions" />
    <!-- 环形饼图容器 -->
    <EChartWrapper :type="'line'" :options="lineChartOptions" />
    <!-- 堆积柱状图容器 -->
    <EChartWrapper :type="'boxplot'" :options="boxplotOptions" />
    <!-- 支持所有类型echarts -->
  </div>
</template>

<script lang="tsx" setup>
import { ref } from 'vue';
import EChartWrapper from '@/components/ECharts/index.vue';

// 环形饼图自定义配置
const pieChartOptions = ref({
  title: {
    text: '2024年9月招聘学历要求',
  },
  tooltip: {
    show: false,
  },
  emphasis: {
    disabled: true, // 禁用鼠标悬停的高亮效果
  },
  legend: {
    show: false,
  },
  series: [
    {
      name: '学历要求',
      type: 'pie',
      radius: ['40%', '70%'], // 设置为环形饼图，内外半径
      top: '30',
      right: '200',
      avoidLabelOverlap: false,
      label: {
        show: true,
        position: 'outside', // 标签位置为外部
        formatter: '{d}%\n{b}', // 显示百分比和类别
      },
      labelLine: {
        show: true,
      },
      data: [
        { value: 1, name: '硕士及以上', itemStyle: { color: '#5AB1EF' } },
        { value: 31, name: '本科及以上', itemStyle: { color: '#9FDABF' } },
        { value: 49, name: '专科及以上', itemStyle: { color: '#9FDABF' } },
        { value: 19, name: '不限', itemStyle: { color: '#D9D9D9' } },
      ],
    },
  ],
  // 移除可能的 xAxis 和 grid 设置
  grid: {
    show: false, // 关闭 grid
  },
  xAxis: {
    show: false, // 关闭 xAxis
  },
  yAxis: {
    show: false, // 不定义 yAxis
  },
});
// 堆积柱状图自定义配置
const barChartOptions = ref({
  title: {
    text: '近12个月招聘学历要求趋势图',
    textStyle: {
      fontWeight: 'normal',
      color: '#1d2129',
    },
  },
  tooltip: {
    show: false,
  },
  emphasis: {
    disabled: true, // 禁用鼠标悬停的高亮效果
  },
  legend: {
    bottom: '0%', // 将图例放在底部
    left: 'center',
    icon: 'circle', // 使用圆形图标
    textStyle: {
      color: '#666', // 图例文字颜色
    },
    formatter: function (name) {
      return name;
    },
    // 手动定义每个系列图例的样式
    data: [
      {
        name: '博士及以上',
        icon: 'circle',
        itemStyle: {
          borderWidth: 2,
          borderColor: '#7BBDF5', // 对应 series 的颜色
          color: 'transparent',
        },
      },
      {
        name: '硕士及以上',
        icon: 'circle',
        itemStyle: {
          borderWidth: 2,
          borderColor: '#5AB1EF', // 对应 series 的颜色
          color: 'transparent',
        },
      },
      {
        name: '本科及以上',
        icon: 'circle',
        itemStyle: {
          borderWidth: 2,
          borderColor: '#9FDABF', // 对应 series 的颜色
          color: 'transparent',
        },
      },
      {
        name: '专科及以上',
        icon: 'circle',
        itemStyle: {
          borderWidth: 2,
          borderColor: '#68D9A7', // 对应 series 的颜色
          color: 'transparent',
        },
      },
      {
        name: '不限',
        icon: 'circle',
        itemStyle: {
          borderWidth: 2,
          borderColor: '#D9D9D9', // 对应 series 的颜色
          color: 'transparent',
        },
      },
    ],
    selectedMode: false, // 禁用图例的点击事件
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '18%', // 给图例留出空间，避免重叠
    top: '15%', // 给标题留出足够的空间
    containLabel: true, // 确保标签不会超出图表区域
  },
  xAxis: {
    type: 'category',
    data: [
      '10月',
      '11月',
      '12月',
      '1月',
      '2月',
      '3月',
      '4月',
      '5月',
      '6月',
      '7月',
      '8月',
      '9月',
    ],
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value}%', // 显示百分比格式
    },
  },
  series: [
    {
      name: '博士及以上',
      type: 'bar',
      stack: '总量',
      data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
      itemStyle: { color: '#7BBDF5' },
      barWidth: 20, // 调整柱状图的宽度
    },
    {
      name: '硕士及以上',
      type: 'bar',
      stack: '总量',
      data: [3, 4, 5, 6, 5, 6, 5, 6, 5, 5, 5, 5],
      itemStyle: { color: '#5AB1EF' },
      barWidth: 20, // 调整柱状图的宽度
    },
    {
      name: '本科及以上',
      type: 'bar',
      stack: '总量',
      data: [30, 32, 31, 29, 30, 30, 31, 31, 30, 31, 31, 31],
      itemStyle: { color: '#9FDABF' },
      barWidth: 20, // 调整柱状图的宽度
    },
    {
      name: '专科及以上',
      type: 'bar',
      stack: '总量',
      data: [50, 49, 48, 49, 48, 49, 48, 48, 49, 48, 49, 49],
      itemStyle: { color: '#68D9A7' },
      barWidth: 20, // 调整柱状图的宽度
    },
    {
      name: '不限',
      type: 'bar',
      stack: '总量',
      data: [16, 14, 15, 15, 16, 14, 15, 14, 15, 15, 15, 15],
      itemStyle: { color: '#D9D9D9' },
      barWidth: 20, // 调整柱状图的宽度
    },
  ],
});

// 折线图自定义配置
const lineChartOptions = ref({
  title: [
    {
      // 标题
      text: '近12个月招聘人数趋势图',
    },
    {
      // 标题
      subtext: '单位：人',
      right: '5%',
    },
  ],
  tooltip: {
    show: false,
  },
  emphasis: {
    disabled: true, // 禁用鼠标悬停的高亮效果
  },
  legend: {
    bottom: '5%', // 使 legend 位置更靠近图表
    left: 'center',
    icon: 'circle', // 使用圆形图标
    itemWidth: 10,
    itemHeight: 10,
    textStyle: {
      color: '#666',
    },
    data: ['2024', '2023'],
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '15%',
    top: '20%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: [
      '10月',
      '11月',
      '12月',
      '1月',
      '2月',
      '3月',
      '4月',
      '5月',
      '6月',
      '7月',
      '8月',
      '9月',
    ],
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value}w', // 显示单位为 "w"
    },
  },
  series: [
    {
      name: '2024',
      type: 'line',
      smooth: true,
      symbol: 'none', // 隐藏圆圈
      itemStyle: {
        color: 'transparent',
        borderColor: '#5AB1EF',
        borderWidth: 2,
      },
      lineStyle: {
        color: '#5AB1EF',
        width: 3,
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(90, 177, 239, 0.5)' },
          { offset: 1, color: 'rgba(90, 177, 239, 0)' },
        ]),
      },
      emphasis: {
        disabled: true,
      },
      data: [12, 23, 35, 46, 58, 60, 50, 40, 55, 60, 62, 58],
    },
    {
      name: '2023',
      type: 'line',
      smooth: true,
      symbol: 'none', // 隐藏圆圈
      itemStyle: {
        color: 'transparent',
        borderColor: '#C5E0F3',
        borderWidth: 2,
      },
      lineStyle: {
        color: '#C5E0F3',
        width: 2,
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(197, 224, 243, 0.5)' },
          { offset: 1, color: 'rgba(197, 224, 243, 0)' },
        ]),
      },
      emphasis: {
        disabled: true,
      },
      data: [10, 15, 20, 28, 35, 38, 30, 25, 40, 50, 52, 48],
    },
  ],
});

// 箱线图自定义配置
const boxplotOptions = ref({
  title: [
    {
      text: '近12个月招聘薪资趋势图',
    },
    {
      subtext: '单位：元/月',
      right: '5%',
    },
  ],
  tooltip: {
    show: false, // 禁用鼠标悬停时的提示框
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '10%',
    top: '20%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    data: ['9', '8', '7', '6', '5', '4', '3', '2', '1', '12', '11', '10'], // 使用提供的 xMarks
    axisLine: {
      lineStyle: {
        color: '#ddd', // X轴线颜色
      },
    },
    axisTick: {
      show: false, // 隐藏X轴刻度线
    },
    axisLabel: {
      color: '#999', // X轴标签颜色
    },
  },
  yAxis: {
    type: 'value',
    min: 0, // Y轴的最小值为0
    max: 14000, // Y轴的最大值为14000
    axisLine: {
      show: false, // 隐藏Y轴线
    },
    axisTick: {
      show: false, // 隐藏Y轴刻度线
    },
    axisLabel: {
      formatter: function (value) {
        return value >= 10000 ? (value / 10000).toFixed(1) + 'w' : value; // 将超过10000的值转化为"w"单位
      },
      color: '#999',
    },
    splitLine: {
      lineStyle: {
        color: '#eee', // Y轴网格线颜色
      },
    },
    data: [0, 2800, 5600, 8400, 11200, 14000], // 使用提供的 yMarks
  },
  series: [
    {
      type: 'candlestick', // 使用K线图
      data: [
        [3800, 6000, 2800, 8500], // 对应"9月"的数据
        [4000, 6200, 3000, 8800], // 对应"8月"
        [4200, 6400, 3200, 9000], // 对应"7月"
        [4400, 6600, 3400, 9200], // 对应"6月"
        [4600, 6800, 3600, 9500], // 对应"5月"
        [4800, 7000, 3800, 9800], // 对应"4月"
        [5000, 7200, 4000, 10000], // 对应"3月"
        [5200, 7400, 4200, 10200], // 对应"2月"
        [5400, 7600, 4400, 10400], // 对应"1月"
        [5600, 7800, 4600, 10600], // 对应"12月"
        [5800, 8000, 4800, 10800], // 对应"11月"
        [6000, 8200, 5000, 11000], // 对应"10月"
      ],
      itemStyle: {
        color: 'transparent', // 使柱体为空心
        borderColor: '#F39C12', // 阳线边框颜色
        color0: 'transparent', // 阴线为空心
        borderColor0: '#F39C12', // 阴线边框颜色
        borderWidth: 2, // 边框宽度
      },
      emphasis: {
        disabled: true, // 禁用鼠标悬停时的高亮效果
      },
    },
  ],
});
</script>

<style lang="scss" scoped></style>
